<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Popover | Onsen UI</title>
    <link rel="stylesheet" href="../../build/css/onsenui.css">
    <link rel="stylesheet" href="../../build/css/onsen-css-components.css">

    <script src="../../build/js/onsenui.js"></script>

    <script>
      var app = {};
      ons.ready(function() {
        ons.createPopover('popover.html').then(function(popover) {
          app.popover = popover;
        });
      });
      app.show = function(e) {
        app.popover.show({target: e});
      };
    </script>

  </head>

  <body>
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button modifier="outline" id="navigation" onclick="app.show('#navigation')">
            <i class="ion-ios-menu" style="font-size:32px; vertical-align: -6px"></i>
          </ons-toolbar-button>
        </div>

        <div class="center">
          Popover demo!
        </div>

        <div class="right">
          <ons-toolbar-button modifier="outline" id="top-right" onclick="app.show(event)">Button</ons-toolbar-button>
        </div>
      </ons-toolbar>

      <div style="text-align: center">
        <br />
        <br />
        <!-- 'buttonTest' is a global variable created from the ID -->
        <ons-button id="buttonTest" onclick="app.show(buttonTest)">Click me!</ons-button>
      </div>

      <div class="tabbar">
        <label onclick="app.show('#stop')" class="tabbar__item">
          <input type="radio" name="tabbar-b" checked="checked">
          <button id="stop" class="tabbar__button">
            <i class="tabbar__icon ion-ios-square"></i>
          </button>
        </label>

        <label onclick="app.show('#record')" class="tabbar__item">
          <input type="radio" name="tabbar-b">
          <button id="record" class="tabbar__button">
            <i class="tabbar__icon ion-ios-microphone"></i>
          </button>
        </label>

        <label onclick="app.show('#star')" class="tabbar__item">
          <input type="radio" name="tabbar-b">
          <button id="star" class="tabbar__button">
            <i class="tabbar__icon ion-ios-star"></i>
          </button>
        </label>

        <label onclick="app.show('#cloud')" class="tabbar__item">
          <input type="radio" name="tabbar-b">
          <button id="cloud" class="tabbar__button">
            <i class="tabbar__icon ion-ios-cloud-outline"></i>
          </button>
        </label>

        <label onclick="app.show('#pie')" class="tabbar__item">
          <input type="radio" name="tabbar-b">
          <button id="pie" class="tabbar__button">
            <i class="tabbar__icon ion-ios-pie"></i>
          </button>
        </label>
      </div>
    </ons-page>

    <template id="popover.html">
      <ons-popover direction="up down" cancelable cover-target>
        <div style="text-align: center; opacity: 0.5;">
          <p>This is a popover!</p>
          <p><small>Click the background to remove the popover.</small></p>
        </div>
      </ons-popover>
    </template>

  </body>
</html>
